<template>
	<view class="content">
		<div class="item" v-for="(item, index) in dataList" :key="index">
			<image class="poker" :src="getPokerImage(item)"
				:style="{
					'transform': `rotate(${item.isReverse ? 180 : 0}deg)`, 
				}"
			></image>
			<div class="info">
				<div style="font-size: 28rpx;color: gold;">『{{ item.title }}』</div>
				<div style="margin-top: 10rpx;font-size: 22rpx;font-weight: bold;">{{ item.perPokerDesc }}</div>
				<div style="margin-top: 10rpx;font-size: 24rpx;color: gold;">{{ `[暗语]：${item.title} (${item.isReverse ? '逆位' : '正位'}) ${item.showImp}` }}</div>
				<div style="margin-top: 10rpx;font-size: 24rpx;">{{ `[解释]：${item.showDesc}` }}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import tarotData from '@/pages/tarotData.js'
	export default {
		data() {
			return {
				testImg: require('@/static/images/poker-back.jpeg'),
				dataList: [],
			}
		},
		onLoad: function(option) {
			const params = JSON.parse(decodeURIComponent(option.params));
			// console.log("params: ", params);
			const formItem = params.formItem;
			const descList = tarotData.perPokerDesc[formItem.title]
			const reverseList = params.reverseList || [];
			
			var tmp = [];
			for (var i = 0; i < params.idList.length; i++) {
				var dataIdx = params.idList[i];
				var data = this.tarotPics.tarotData[dataIdx];
				data.perPokerDesc = descList[i];
				data.isReverse = reverseList.includes(dataIdx);
				data.showDesc = data.desc;
				data.showImp = data.implication;
				if (data.isReverse) {
					data.showDesc = data.reverseDesc;
					data.showImp = data.reverseImplication;
				}
				tmp.push(data);
			}
			this.dataList = tmp;
		},
		mounted() {
		},
		methods: {
			onShareAppMessage: function(res) {
			  return {
				title: '塔罗牌在线抽卡',
			  }
			},
			getPokerImage(data) {
				if (data.img) {
					if (data.picIdx < this.tarotPics.mainPageImgNum) {
						return require(`@/static/images/tarotImage/${data.img}.jpeg`);
					} else {
						return require(`@/pageDetail/static/tarotImage/${data.img}.jpeg`);
					}
				}
				return this.testImg;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #20254c;
		min-height: 100vh;
	}
	.item {
		width: 90%;
		height: 30%;
		background-color: rgb(46,39,108); // #3027c6;
		margin: 5%;
		display: flex;
		flex-direction: row;
	    justify-content: center;
	    align-items: center;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.poker {
		width: 30vw;
		min-width: 30vw;
		max-height: 51vw; // 35 * 1.7
		border-radius: 10rpx;
	}
	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		max-width: calc(100% - 30vw);
		padding: 10rpx 10rpx 10rpx 20rpx;
		color: #fff;
	}
</style>